<!-- 分类 -->
<template>
	<view class="category-box">
		<!-- 三级分类 -->
		<!-- <three-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 4"></three-catgory> -->
		<!-- 二级分类 -->
		<!-- <two-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 3"></two-catgory> -->
		<!-- 一级分类-->
		<!-- <one-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 2"></one-catgory> -->
		<!--直接购买，点餐 -->
		<!-- <takeout-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 1"></takeout-catgory> -->
		<!-- 登录提示 -->
		<!-- <shopro-auth-modal v-if="authType"></shopro-auth-modal> -->
		<!-- <shopro-tabbar></shopro-tabbar> -->
		<view class="searchbox">
			<view class="search">
				<image class="search_img" :src="$IMG_URLT + 'ic_ss@2x.png'"></image>
				<u-input class="search_int" placeholder="请输入搜索内容" v-model="value" type="text" />
				<view class="search_btn" @click="searchbtn">搜索</view>
			</view>
		</view>
		<!-- <view class="listdrop">
			<u-dropdown ref="uDropdown" active-color="#555555" inactive-color="#BBBBBB">
				<u-dropdown-item :title="onetext" >
					<view class="slot-content" style="background-color: #f8f8f8f8;padding-top:20rpx;">
						<scroll-view scroll-y="true" style="height: 650rpx;">
							<view class="listdrop_list" v-for="item in onelist" @click="changelistone(item,1)">
								<view class="listdrop_list_text" :class="selectlist.id==item.id?'listdrop_list_textactive':''">{{item.name}}</view>
								<image v-if="selectlist.id==item.id" :src="$IMG_URLT + 'category_02.png'"></image>
							</view>
						</scroll-view>
						<view class="listdrop_bottom">
							<view class="listdrop_bottom_btn" @click="clearlistone(1)">重置</view>
							<view class="listdrop_bottom_btn listdrop_bottom_btntwo" @click="closeDropdown(1,item)">确定</view>
						</view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item :title="twotext" >
					<view class="slot-content" style="background-color: #f8f8f8f8;padding-top:20rpx;">
						<scroll-view scroll-y="true" style="height: 650rpx;">
							<view class="" style="display: flex;flex-wrap:wrap">
								<view class="listdrop_search" v-for="item in catBreedlist" @click="changelistone(item,2)">
									<image :src="item.image"></image>
									<view class="listdrop_search_text" :class="selectlisttwo.id==item.id?'listdrop_search_textactive':''">{{item.name}}</view>
								</view>
							</view>
							
						</scroll-view>
						<view class="listdrop_bottom">
							<view class="listdrop_bottom_btn" @click="clearlistone(2)">重置</view>
							<view class="listdrop_bottom_btn listdrop_bottom_btntwo" @click="closeDropdown(2,item)">确定</view>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
			<!-- <view class="listdrop_btn" @tap="clearshear"><image src="../../static/images/category_01.png"></image>清空筛选项</view> -->
		<!-- </view> -->

		<view class="slot-content" style="width: 24%;background-color: #f8f8f8f8;top: 70px;
    position: absolute;">
			<scroll-view scroll-y="true" class="scroll-box" style="">
				<view class="">
					<view class="listdrop_search" v-for="item in catBreedlist" @click="changelistone(item,2)">
						<view class="" style="height: 50px;width: 2px;background-color: #333;position: absolute;"
							v-show="selectlisttwo.id==item.id">
						</view>
						<view class="listdrop_search_text"
							:class="selectlisttwo.id==item.id?'listdrop_search_textactive':''">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="right" style="width: 76%;top: 70px;right: 0;
    position: absolute;">
			<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box" style="">
				<view class="list">
					<!-- <custom-waterfalls-flow ref="flowWorkList" seat="1" class="pubuliu" :value="catlist"
						@imageClick="imageclick" v-if="catlist.length>0"> -->
					<view class="item" v-if="catlist.length>0" v-for="(item,index) in catlist" :key="index" @tap="imageclick(item)">
						<view class="">
							<image :src="item.image" mode="widthFix"
								style="height: auto;width: 100px;border-radius: 6px;"></image>
						</view>
						<view class="">
							<view class="title">{{item.name}}</view>
							<view class="icon">
								<view class="icon_list colorone">{{item.breed_name}}</view>
								<view class="icon_list colortwo">{{item.age}}天</view>
								<view class="icon_list2 colorthr">
									<image
										:src="item.gender=='公'?`${$IMG_URLT}category_03.png`:`${$IMG_URLT}category_04.png`">
									</image>
								</view>
							</view>
							<view class="text">{{item.introduce}}</view>
							<!-- <view class="desc">{{item.desc}}</view> -->
						</view>

					</view>
					<!-- </custom-waterfalls-flow> -->
				</view>

				<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_groupon.png'"
					tipText="暂无商品，还有更多好货等着你噢~"></shopro-empty>

				<u-loadmore v-s how="isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
			</scroll-view>
		</view>
	</view>

	</view>
</template>

<script>
	import takeoutCatgory from './category/takeout-catgory.vue';
	import threeCatgory from './category/three-catgory.vue';
	import twoCatgory from './category/two-catgory.vue';
	import oneCatgory from './category/one-catgory.vue';
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {
			takeoutCatgory,
			threeCatgory,
			twoCatgory,
			oneCatgory
		},
		data() {
			return {
				categoryType: 0, //1:快速购买,2:一级分类，3:二级分类，4:三级分类
				categoryStyleId: 0, //分类Id
				onetext: '默认排序',
				twotext: '品种分类',
				onelist: [{
						id: 1,
						name: '发布时间正序',
						value: 'create_time,asc'
					},
					{
						id: 2,
						name: '发布时间倒序',
						value: 'create_time,desc'
					},
					{
						id: 3,
						name: '年龄高到低',
						value: 'age,desc'
					},
					{
						id: 4,
						name: '年龄低到高',
						value: 'age,asc'
					},
				],
				selectlist: '',
				selectlisttwo: '',
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				isEmpty: false,
				value: '',
				catlist: [],
				catBreedlist: [],
				catlistpage: 0,
				catlistlastpage: 0,
			}
		},
		computed: {
			...mapGetters(['authType'])
		},
		onLoad() {
			this.getcatlist();
			this.getcatBreed()
		},
		methods: {
			// 搜索
			searchbtn() {
				this.catlistpage = 0
				this.catlist = []
				this.getcatlist()
			},
			// 获取猫咪列表数据
			getcatlist() {
				let that = this;
				that.$http('goods.catlists', {
					cat_code: that.value,
					pid: that.selectlisttwo.id ? that.selectlisttwo.id : '',
					order: that.selectlist.value ? that.selectlist.value : '',
					page: that.catlistpage + 1
				}).then(res => {
					if (res.code === 1) {
						that.catlist = [...that.catlist, ...res.data.lists.data]
						that.catlistlastpage = res.data.lists.last_page
						// that.commentList = res.data.data;
						// that.commentNum = res.data.total;
						// this.$refs.flowWorkList.refresh()

						console.log(that.catlist)
					}
				});
			},
			// 获取猫咪分类
			getcatBreed() {
				let that = this;
				that.$http('goods.catBreed', {
					pid: 2,
				}).then(res => {
					if (res.code === 1) {
						that.catBreedlist = res.data
						// that.commentList = res.data.data;
						// that.commentNum = res.data.total;
					}
				});
			},
			// 清空筛选
			clearshear() {
				console.log(11111)
				this.onetext = '默认排序'
				this.twotext = '品种分类'
				this.selectlist = ''
				this.selectlisttwo = ''
				this.catlist = []
				this.catlistlastpage = 1;
				this.getcatlist()
			},
			// 排序筛选
			changelistone(item, num) {
				if (num == 1) {
					this.selectlist = item
				} else {
					this.selectlisttwo = item
				}
				console.log(item)
				console.log(this.selectlisttwo)
				// this.catlist=[]
				// this.catlistlastpage = 1;
				// this.getcatlist()
				console.log(num, item)
				if (num == 1) {
					this.onetext = this.selectlist.name ? this.selectlist.name : '默认排序'
				} else {
					this.twotext = this.selectlisttwo.name ? this.selectlisttwo.name : '品种分类'
				}
				// this.$refs.uDropdown.close();
				// 重新请求对应列表
				this.catlist = []
				this.catlistlastpage = 1;
				this.getcatlist()
			},
			// 排序筛选清空
			clearlistone(num) {
				if (num == 1) {
					this.selectlist = ''
				} else {
					this.selectlisttwo = ''
				}
				// this.catlist=[]
				// this.catlistlastpage = 1;
				// this.getcatlist()
			},
			// 筛选完成
			closeDropdown(num, item) {
				console.log(num, item)
				if (num == 1) {
					this.onetext = this.selectlist.name ? this.selectlist.name : '默认排序'
				} else {
					this.twotext = this.selectlisttwo.name ? this.selectlisttwo.name : '品种分类'
				}
				this.$refs.uDropdown.close();
				// 重新请求对应列表
				this.catlist = []
				this.catlistlastpage = 1;
				this.getcatlist()
			},
			// 加载更多
			loadMore() {
				if (this.catlistpage < this.catlistlastpage) {
					this.catlistlastpage += 1;
					this.getcatBreed();
				}
			},
			// 点击列表跳转详情
			openPreview(path, parmas) {
				console.log(1111)
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			imageclick(item) {
				console.log(item)
				this.openPreview('/pages/goods/detail', {
					id: item.id
				})
			},

		}
	};
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	// .category-box {
	// 	height: 100%;
	// 	flex: 1;
	// 	overflow: hidden;
	// }
	.slot-content{
		height: calc(100vh - 70px);
	}
	.right{
		height: calc(100vh - 70px);
	}
	.searchbox {
		width: 100%;
		height: 116rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		position: fixed;
		z-index: 100;
	}

	.search {
		width: 702rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		border: 3rpx solid #FBB03B;
		display: flex;
		align-items: center;
		margin: 0 auto;

		.search_img {
			width: 36rpx;
			height: 36rpx;
			margin-left: 24rpx;
		}

		.search_int {
			font-size: 28rpx;
			font-family: AlibabaPuHuiTiR;
			flex: 1;
		}

		.search_btn {
			width: 144rpx;
			height: 76rpx;
			background: #FBB03B;
			border-radius: 38rpx;
			margin-left: auto;
			text-align: center;
			font-size: 28rpx;
			font-family: AlibabaPuHuiTiR;
			color: #111111;
			line-height: 76rpx;
		}
	}

	.listdrop {
		display: flex;
		align-items: center;
		margin: 20rpx 0;
		position: relative;

		.listdrop_btn {
			position: absolute;
			right: 24rpx;
			z-index: 99;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-family: AlibabaPuHuiTiR;
			color: #BBBBBB;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 5rpx;
			}
		}

		/deep/ .u-dropdown__menu__item {
			justify-content: flex-start;
			flex: none;
			margin-left: 24rpx;

			.u-flex {
				padding: 0 30rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 38rpx;
			}
		}

		.listdrop_list {
			margin: 0 24rpx;
			padding: 48rpx 0 28rpx 0;
			border-bottom: 2rpx solid #E7E7E7;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.listdrop_list_text {
				font-size: 28rpx;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;
				color: #111111;
			}

			.listdrop_list_textactive {
				color: #FBB03B;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.listdrop_bottom {
			height: 120rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;

			.listdrop_bottom_btn {
				width: 340rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				margin: 0 11rpx;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;
				color: #999999;
				background: #FFFFFF;
				border: 2rpx solid #CCCCCC;
			}

			.listdrop_bottom_btntwo {
				color: #111111;
				;
				background: #FBB03B;
				border: 2rpx solid #FBB03B;
			}
		}
	}

	.list_box {}

	.list {
		margin: 0 24rpx;

		.pubuliu {
			.data-v-ddfcbb1c {
				border-radius: 15rpx;
			}

			image {
				width: 340rpx;
				border-radius: 15rpx;
			}
		}

		.title {
			font-size: 28rpx;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #111111;
			margin: 0 16rpx;
			// margin-top: 20rpx;
		}

		.item {
			display: flex;
			// align-items: center;
			border-bottom: 1px solid #BBBBBB;
			margin-top: 6px;
		}

		.icon {
			margin: 0 16rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.icon_list {
				height: 42rpx;
				padding: 0 12rpx;
				font-size: 22rpx;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;
				margin-right: 10rpx;
				line-height: 42rpx;
			}

			.icon_list2 {
				height: 42rpx;
				padding: 0 8rpx;
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.colorone {
				color: #F69B0E;
				background: rgba(251, 176, 59, 0.12);
			}

			.colortwo {
				color: #E60000;
				background: rgba(230, 0, 0, 0.09);
			}

			.colorthr {
				color: #F69B0E;
				background: rgba(83, 0, 230, 0.09);
			}

		}

		.text {
			margin: 0 auto;
			width: 306rpx;
			font-size: 24rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #555555;
			line-height: 36rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}

	.listdrop_search {
		height: 50px;
		line-height: 50px;
		text-align: center;

		image {
			display: block;
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
			margin: 0 auto;
		}

		.listdrop_search_text {
			font-size: 28rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #333;
			text-align: center;
			// margin-top: 16rpx;
		}

		.listdrop_search_textactive {
			color: #000;
			background-color: #fff;
		}
	}
</style>